<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
  >
    <div
      v-for="data in dataList"
      :key="data.activityId"
      @click="handleChangePage(data)"
      clearfix
    >
      <div class="part" van-clearfix>
        <div class="poster">
          <img :src="data.poster" />
        </div>
        <div class="text">
          <p class="title">{{ data.fullName }}</p>
          <p class="time" style="margin-top: 4px">
            {{ data.timeRange }} | {{ data.venueName }}
          </p>
          <p class="time">暂无评分</p>
          <p class="time" style="margin-top: 8px"></p>
          <p class="price">
            {{ data.lowPrice
            }}<span class="time" style="margin-left: 4px">元起</span>
          </p>
        </div>
      </div>
    </div>
  </van-list>
</template>
<script>
import http from "/src/util/http.js";
import { ref } from "vue";
export default {
  setup() {
    const active = ref(0);
    return { active };
  },
  props: ["Cid"],
  data() {
    return {
      dataList: [],
      loading: false,
      finished: false,
      current: 1,
    };
  },
  mounted() {
    http({
      url: `/api/v3/activities?pageIndex=${this.current}&categoryId=${this.Cid}&time=&sort=&seatMap=false&highestPrice=&lowestPrice=`,
    }).then((res) => {
      console.log(res.data.data);
      this.dataList = res.data.data;
    });
  },
  methods: {
    handleChangePage(data) {
      console.log(data);
      this.$router.push({
        path: "/activity",
        query: {
          data:JSON.stringify(data),
        },
      });
    },
    async onLoad() {
      this.loading = true;
      // console.log("到底了");
      this.current++;
      const res = await http({
        url: `/api/v3/activities?pageIndex=${this.current}&categoryId=${this.Cid}&time=&sort=&seatMap=false&highestPrice=&lowestPrice=`,
      });
      this.dataList.push(...res.data.data);
      this.loading = false;
      if (res.data.data.length === res.data.totalNum) {
        this.finished = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.part {
  min-height: 125px;
  padding: 15px 0 0;
  display: flex;
  padding-left: 1rem;

  .text {
    margin: 0 0 0 8px;
  }

  .poster {
    width: 78px;
    height: 104px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.price {
  color: #ff2661;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.time {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}

p.title {
  width: 254px;
  font-size: 15px;
  color: #333;
  height: 44px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: 2;
  font-weight: 700;
}
</style>
<style>
.van-tab--active {
  font-weight: 700;
  font-size: 16px;
  transition: font-size 0.3s;
}
</style>
